<script setup>
import { useRoute } from 'vue-router'
import { onMounted } from 'vue'
import { useDetailsStore } from '../../stores/index'
import picUrlView from './brand/picUrl.vue'
import descView from './brand/desc.vue'
import listView from './brand/list.vue'

const route = useRoute()

let details = useDetailsStore()
onMounted(async () => {
  await details.fetchGetbrandDetails(route.params.id)
  // console.log(details.brandData)
  // console.log(details.list)
})

//返回
const back = () => {
  history.back()
}
</script>

<template>
  <div class="brand-details">
    <button @click="back" id="back"><span><</span><span>返回</span></button>
    <pic-url-view :picUrl="details.brandData.picUrl" />
    <desc-view :desc="details.brandData.desc" />
    <list-view :list="details.list" />
  </div>
</template>

<style scoped>
.details {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background-color: rgb(235, 235, 235);
}
#back {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 5px;
  padding: 10px;
  color: rgb(0, 38, 255);
  background-color: white;
  border: 0;
}
</style>
